<template>
  <div>
    <div class="posttable">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
              <div style="margin-left: 5px;">
                <el-button
                  class="add"
                  :class="{'active' : newcolor}"
                  size="small"
                  @mousedown.native="adddown"
                  @mouseup.native="addup"
                  @click="addshow"
                  round
                >发布
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            @selection-change="handleSelectionChange"
            class="tableT"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column prop="customerName" label="客户简称" width="120"></el-table-column>
            <el-table-column prop="no" label="需求编号" width="160"></el-table-column>
            <el-table-column label="需求名称" width="150" prop="name">
            </el-table-column>
            <el-table-column prop="postLevel" label="职位级别" width="100"></el-table-column>
            <el-table-column prop="introducer" label="发布人" width="80"></el-table-column>
            <el-table-column prop="area" label="所属区域" width="90"></el-table-column>
            <el-table-column prop="number" label="需求人数" width="90"></el-table-column>
            <el-table-column label="需求程度" width="100">
              <template slot-scope="scope">
                    <el-button
                  size="mini"
                  v-if="scope.row.star == 3"
                  style="background-color: #FF1C1D;color: #fff;"
                >困难</el-button>
                <el-button
                  size="mini"
                  v-if="scope.row.star == 2"
                  style="background-color: #2931FE;color: #fff;"
                >普通</el-button>
                <el-button
                  size="mini"
                  v-if="scope.row.star == 1"
                  style="background-color: #FFC027;color: #fff;"
                >简单</el-button>
                <span
                  v-if="scope.row.star == 0"
                >空</span>
              </template>
            </el-table-column>
            <el-table-column label="组别" width="150">
              <template slot-scope="scope" v-if="scope.row.hr">
                <el-button
                  size="mini"
                  v-for="item in scope.row.hr"
                  :key="item"
                  style="background-color: #3598f9;color: #fff;"
                >{{item}}
                </el-button>
              </template>
            </el-table-column>
            <!-- <el-table-column label="辅助招聘专员" width="150">
              <template slot-scope="scope" v-if="scope.row.hrSup">
                <el-button
                  size="mini"
                  v-for="item in scope.row.hrSup"
                  :key="item"
                  style="background-color: #50c188;color: #fff;"
                >{{item}}
                </el-button>
              </template>
            </el-table-column> -->
            <el-table-column prop="salaryCap" label="薪资上限" width="120"></el-table-column>
            <el-table-column label="关键词" width="300">
              <template slot-scope="scope" v-if="scope.row.ordinaryKeywords">
                <el-button
                  size="mini"
                  style="background-color: #3598f9;color: #fff;"
                >{{scope.row.ordinaryKeywords}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="查看简历">
              <template slot-scope="props">
                <el-button @click="resume(props.row.no)" size="mini" type="primary">
                  查看简历
                </el-button>
              </template>
            </el-table-column>
            <el-table-column type="expand" label="功能区" width="80">
              <template slot-scope="props">
                <el-row>
                  <el-col :span="10" :offset="1">
                    <div class="duty">职位职责</div>
                    <el-input
                      type="textarea"
                      v-model="props.row.duty"
                      :autosize="{minRows:4}"
                      disabled resize="none">
                    </el-input>
                  </el-col>
                  <el-col :span="12" :offset="1">
                    <div class="duty">任职要求</div>
                    <el-input
                      type="textarea"
                      v-model="props.row.require"
                      :autosize="{minRows:4}"
                      disabled resize="none">
                    </el-input>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    
    <el-dialog
      title="发布岗位"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">确定发布这些岗位吗？</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" :disabled="once" round @click="sendPost">确 定</el-button>
        <el-button round @click="deleteClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  
  
  
    <el-dialog
      title="简历"
      class="addP addPP"
      :visible.sync="resumeDialogVisible"
      width="415px"
      :before-close="resumeCancel"
    >
      <div class="box">
        <div>
          <p><strong>面试人员简历</strong></p>
          <div v-if="resumeTotal == 0" style="text-align:center;margin-top:10px;">暂无简历信息</div>
          <div v-else class="nameBox">
            <div class="name" v-for="item in resumeList" :key="item.id"><a :href="item.group+'/'+item.fileAddress"
                                                                           target="_blank">{{item.name}}</a></div>
          </div>
        </div>
        <div style="margin-top:20px;">
          <p><strong>入职人员简历</strong></p>
          <div v-if="entryTotal == 0" style="text-align:center;margin-top:10px;">暂无简历信息</div>
          <div v-else class="nameBox">
            <div class="name" v-for="item in entryList" :key="item.id"><a :href="item.group+'/'+item.fileAddress"
                                                                          target="_blank">{{item.name}}</a></div>
          </div>
        </div>
      </div>
    </el-dialog>
    
    
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何职位</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleOpen">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  
  export default {
    name: "jobPush",
    data() {
      return {
        newcolor: false,
        tableData: [],
        multipleSelection: [],
        editdialogVisible: false,
        dialogVisible: false,
        once : false,
        resumeList: [],
        resumeTotal: null,
        entryList: [],
        entryTotal: null,
        resumeDialogVisible: false,
      }
    },
    created() {
      axios.post(this.url + '/demand/getSelectList').then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
        }
      })
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //鼠标按下发布按钮
      adddown() {
        this.newcolor = true;
      },
      //点击按钮弹起
      addup() {
        this.newcolor = false;
      },
      addshow() {
        this.once = false;
        if (this.multipleSelection.length !== 0) {
          this.dialogVisible = true;
          document.documentElement.style.overflow = 'hidden';
        } else {
          this.editdialogVisible = true;
          document.documentElement.style.overflow = 'hidden';
        }
      },
      //错误警告弹出框关闭
      handleOpen() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //错误警告弹出框关闭
      handleClose() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      sendPost() {
        var ids = [];
        for (var i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id)
        }
        this.once = true;
        axios.post(this.url + '/demand/issuePost', {
          ids: ids
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.dialogVisible = false;
            document.documentElement.style.overflow = 'auto';
            this.$emit("postSucess");
            this.once = false;
          }
        })
      },
      deleteClose(){
        this.dialogVisible = false;
        this.once = false;
        document.documentElement.style.overflow = 'auto';
      },
      resumeCancel() {
        this.resumeDialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      resume(val) {
        axios.post(this.url + "/demand/getResumes", {
          no: val
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.resumeList = res.data.data;
            this.resumeTotal = this.resumeList.length;
          }
        })
        axios.post(this.url + "/demand/getEntrys", {
          no: val
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.entryList = res.data.data
            this.entryTotal = this.entryList.length;
          }
        })
        this.resumeDialogVisible = true;
      },
    }
  }
</script>
<style scoped>
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .add {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
    padding: 7px 15px !important;
  }
  
  .add:hover {
    color: #fff !important;
  }
  
  .active {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }

  .box {
    min-height: 200px;
  }
</style>
